<template>
  <div id="">
    <headerbox :hasBack='true'></headerbox>
    <headerTab :headerArr="headerArr" @tabEvent="tabEvent"></headerTab>
    <tabNav :tabArr="tabArr" @tabEvent="tabNavEvent" class="bgWhite tabFixed"></tabNav>


    <v-scroll :on-refresh="onRefresh" :on-infinite="enableInfinite ? onInfinite : undefined" style="bottom:0; top:0px;">
      <noneList v-if="orderList.length<1"></noneList>
      <div class="p10 mt80" v-else>
        <appointmentItem v-for="elem in orderList" :key="elem.key" :item='elem' :page_type="page_type"></appointmentItem>
      </div>
    </v-scroll>
  </div>
</template>
<script>
import {orderListActive} from '@/utils/ajaxRequest.js';
import vScroll from '@/components/loadMore/loadMore';
export default {
  name: "",
  data: () => ({
    headerArr:['我预约的','预约我的'],
    tabArr:['全部','已完成','未完成','已取消'],
    orderListJson:{
      token:'',
      page_type:0,   //我预约的 page_type =0;预约我的 page_type =1
      orderType:0,   //订单类型 预约我的 page_type =1 时传 orderType（0：需求订单 1：技能订单）
      page_status:0, //1：已完成 2:未完成 3：已取消 （不传或传0 显示全部）
    },
    orderList:[],
    page_type:0,    //tab选中值
    pageNo:1,   //分页
    enableInfinite:true,
  }),
  components: {
    headerTab:()=>import('../template/headerTab'),
    tabNav:()=>import('../template/tabNav'),
    appointmentItem:()=>import('./appointmentItem'),
    noneList:()=>import('@/components/noneList/noneList'),
    vScroll,
  },
  methods: {
    onRefresh(done) {   //刷新
      this.pageNo = 1;
       this.getOrderList();
       done() // call done
    },
    onInfinite(done) {    //加载
        let self = this;
        self.enableInfinite = false;
        this.pageNo++;
        this.getOrderList();
        done();
     },
    // 获取订单列表
    getOrderList() {
      let self = this;
      let orderParam = self.orderListJson;
      orderListActive(orderParam).then(res=>{
        console.log(res);
        if(res) {
          // self.orderList = res.data.result;
          let result = res.data.result;
          if (result.length<1) {
            self.enableInfinite = false;    //关闭上拉加载
          }else{
            self.enableInfinite = true;     //打开上拉加载
          }
          if (self.pageNo==1) {
            self.orderList = result;
          }else{
            self.orderList = self.orderList.concat(result);
          }
        }
      })
    },
    tabEvent(data) {
      this.page_type = data;
      this.orderListJson.page_type = data;
      this.pageNo = 1;
      this.getOrderList();
    },
    tabNavEvent(data) {
      console.log(data);
      this.orderListJson.page_status = data;
      this.pageNo = 1;
      this.getOrderList();
    }
  },
  mounted() {
    //do something after mounting vue instance
    let self =  this;
    let xlyd_loginInfo = JSON.parse(window.localStorage.getItem('xlyd_loginInfo'));
    self.orderListJson.token = xlyd_loginInfo.token;

    self.getOrderList();
  }
}
</script>
<style lang="scss" scoped>
.tabFixed{
  position: fixed;
  top: 40px;
  left: 0;
  width: 100%;
}
</style>
